<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="ruleForm" class="ruleForm" :rules="rules" ref="ruleForm" label-width="88px" slot="form">          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="考场号：">
                            <el-input v-model="ruleForm.ExamName" :maxlength="11" placeholder="请输入考场名称" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级名称：" prop="ExamSub">
                            <getClass v-model="ruleForm.classId" :schoolId='ruleForm.schoolId' @getClassName='getClassName'></getClass>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" @click="onSubmit('ruleForm')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="middle-box" class="middle-box" v-if='attentionDesc'>
                <p class="middle-title">考试注意事项：</p>
                <p class="middle-con">
                    {{attentionDesc}}
                </p>
            </div>
            <div class="table-title" slot="table-title"></div>
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">
                <el-table-column prop="sRoomnum" align="center" label="考场号">
                    <template scope="scope">
                        <span>{{scope.row.sRoomnum | isNull}}</span>  
                    </template>
                </el-table-column>
                <el-table-column prop="sClassName" align="center" label="班级"></el-table-column> 
                <el-table-column prop="sSubjectName" align="center" label="考试科目">
                    <template scope="scope">
                        <span>{{scope.row.sSubjectName | isNull}}</span>  
                    </template>
                </el-table-column> 
                <el-table-column align="center" label="操作" width="250">
                    <template scope="scope">    
                        <el-button type="text" class="btn-success" @click="toDetail(scope.row)">详情</el-button>      
                    </template>
                </el-table-column>           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
        <createExam @addExamState="addExamState" v-if="addExamMain.dialogFormVisible" :addExamMain="addExamMain"></createExam>
    </div>
</template>
<script>
import TableLayout from 'components/TableLayout';
import {pageWisdomExamroom,listWisdomAttention} from 'api/wisdom';
import school from 'components/SchoolClasss/school';
import createExam from './createExam';
import getClass from 'components/SchoolClasss/class';
import { mapState, mapActions, mapGetters } from 'vuex';
export default{
    name: 'subjectManageList',
    components: {TableLayout, school, createExam, getClass},
    data() {
        return {
            attentionDesc:'',//注意事项
            ruleForm: {// form表单数据
                ExamName: '',
                schoolId: '',
                classId: '',
                className: '',
                ExamSub: ''    
            },
            addExamMain: {
                dialogFormVisible: false,
                className: '',
                schoolType: ''
            },
            dataApply: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: false,
            pId: '',
            rules: {}
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'schoolId'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    // 初始化
    created() {
        this.pId = this.$route.params.id;
        this.ruleForm.schoolId = this.schoolId;
        this.searchFetchData();
        this._listWisdomAttention();
    },
    
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 考试注意事项
        _listWisdomAttention(){
            let json={
                pId: this.$route.params.id
            }
            listWisdomAttention(json).then(res => {
                this.attentionDesc=res.data.content;
            })
        },
  // 回填考试注意事项
        addExamState() {
            this.searchFetchData();
        },

        // 获取班级名称
        getClassName(a) {
            this.ruleForm.className = a;
        },

        // 删除
        deleteRow(id, name) {
            this.$confirm('是否确认删除', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                deleteWisdomSubject(id).then(response => {
                    if (response.data.status==200) {
                        this.searchFetchData();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    } 
                });  
            }).catch((e) => {       
                // console.log(e)
            });
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            pageWisdomExamroom(this.pId, this.ruleForm.ExamName, this.ruleForm.classId, this.listQuery.page, this.config.pageSize).then(response => {              
                this.dataApply = response.data.content === null ? [] : response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;    
            });
        },
        goToAddExam() {
            this.addExamMain.dialogFormVisible = true;
        },

        // 表单查询
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.searchFetchData();
                }
            });
        },

        // 查看
        btnView(obj) {
            this.$router.push({ path: '/examinationMode/checkExam'});
        },

        // 跳转
        toDetail(row) {
            let pid = row.pId;
            this.$router.push({path: `/examinationMode/checkExamDetail/${pid}`});
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }  
    .ruleForm {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .middle-box{
        box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1); 
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        padding:18px 22px 22px;
        background: #fff;
        color: #666;
        font-size: 14px;
        line-height: 26px;
        // margin-top:20px;
        color: #666;
        font-size: 14px;
        line-height: 26px;
    }
    .middle-title{
        height: 40px;
        line-height: 40px;
    }
   
    .btnPosition {
        float:right;
    }
}
</style> 